<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="130"
      class="max-h-550px overflow-y-auto">
      <ContentItemWrap>
        <template v-slot:title> 基本信息 </template>
        <template v-slot:content>
          <section class="px-20px">
            <div class="flex">
              <div class="w-1/2">
                <span class="label">货源名称：</span>
                <span class="break-all">{{formData.goodsSourceName}}</span>
              </div>
              <div class="w-1/2">
                <span class="label">生效时间：</span>
                <span class="break-all">{{formData.startTime}}</span>
              </div>
            </div>
            <div class="flex">
              <div class="w-1/2">
                <span class="label">失效时间：</span>
                <span class="break-all">{{formData.endTime}}</span>
              </div>
              <div class="w-1/2">
                <span class="label">货物名称：</span>
                <span class="break-all">{{formData.productName}}</span>
              </div>
            </div>
            <div class="flex">
              <div class="w-1/2">
                <span class="label">托运方名称：</span>
                <span class="break-all">{{formData.consignorName}}</span>
              </div>
              <div class="w-1/2">
                <span class="label">托运方电话：</span>
                <span class="break-all">{{formData.consignorPhone}}</span>
              </div>
            </div>
            <div class="flex">
              <span class="label">装货地址：</span>
              <span class="break-all"> {{formData.loadingPlaceProvinceName || ''}}{{formData.loadingPlaceCityName ||
                ''}}{{formData.loadingPlaceCountyName || ''}}{{formData.loadingPlaceTownName ||
                ''}}{{formData.loadingPlaceName
                || ''}}</span>
            </div>
            <div class="flex">
              <span class="label">卸货地址：</span>
              <span class="break-all">{{formData.unloadingPlaceProvinceName || ''}}{{formData.unloadingPlaceCityName ||
                ''}}{{formData.unloadingPlaceCountyName || ''}}{{formData.unloadingPlaceTownName ||
                ''}}{{formData.unloadingPlaceName
                || ''}}</span>
            </div>
          </section>
        </template>
      </ContentItemWrap>
      <ContentItemWrap>
        <template v-slot:title> 运输信息 </template>
        <template v-slot:content>
          <section class="px-20px">
            <div class="flex">
              <div class="w-1/2">
                <span class="label">运价：</span>
                <span class="break-all">{{formData.freight}}元/吨</span>
              </div>
              <div class="w-1/2">
                <span class="label">结算依据：</span>
                <span class="break-all">{{getDictLabel(DICT_TYPE.SETTLEMENT_BASIS,
                  formData.settlementBasis?.toString())}}</span>
              </div>
            </div>
            <div class="flex">
              <div class="w-1/2">
                <span class="label">是否计算路损：</span>
                <span class="break-all">{{getDictLabel(DICT_TYPE.IS_CALCULATE_ROAD_LOSS,
                  formData.isCalculateRoadLoss?.toString())}}</span>
              </div>
              <div v-if="formData.isCalculateRoadLoss===0" class="w-1/2">
                <span class="label">合理路损：</span>
                <span class="break-all">{{formData.reasonableRoadLoss}}吨</span>
              </div>
            </div>
            <div v-if="formData.isCalculateRoadLoss===0" class="flex">
              <div class="w-1/2">
                <span class="label">路损单价：</span>
                <span class="break-all">{{formData.roadLossPrice}}元/吨</span>
              </div>
              <div class="w-1/2">
                <span class="label">路损计算规则：</span>
                <span class="break-all">{{getDictLabel(DICT_TYPE.ROAD_LOSS_CALCULATE_RULE,
                  formData.roadLossCalculateRule?.toString())}}</span>
              </div>
            </div>
            <div class="flex">
              <div class="w-1/2">
                <span class="label">抹零规则：</span>
                <span class="break-all">{{getDictLabel(DICT_TYPE.ERASURE_RULE,
                  formData.erasureRule?.toString())}}</span>
              </div>
              <div class="w-1/2">
                <span class="label">备注：</span>
                <span class="break-all">{{formData.remark}}</span>
              </div>
            </div>
          </section>
        </template>
      </ContentItemWrap>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import { DICT_TYPE, getDictLabel } from '@/utils/dict'
  import * as goodsSourceApi from '@/api/transportation/goodsSource'
  const emit = defineEmits(['success'])
  const mapPointsRef = ref()
  const formRef = ref()
  const { t } = useI18n()
  const dialogTitle = ref('')
  const message = useMessage()
  const dialogVisible = ref(false)
  const formLoading = ref(false)
  const disabled = ref(false)
  const addressList = ref([])
  const formData = ref({
    id: undefined,
    goodsSourceName: undefined,
    startTime: undefined,
    endTime: undefined,
    productName: undefined,
    consignorName: undefined,
    consignorPhone: undefined,
    loadingPlaceCode: [],
    loadingPlaceName: undefined,
    loadingPlaceLabel: [],
    loadingPlaceCoordinates: [],
    unloadingPlaceCode: [],
    unloadingPlaceName: undefined,
    unloadingPlaceLabel: [],
    unloadingPlaceCoordinates: [],
    freight: undefined,
    settlementBasis: undefined,
    isCalculateRoadLoss: undefined,
    reasonableRoadLoss: undefined,
    roadLossPrice: undefined,
    roadLossCalculateRule: undefined,
    remark: undefined,
  })

  const open = async (id) => {
    dialogVisible.value = true
    dialogTitle.value = '货源详情'
    formData.value.id = id
    getGoodsSource()
  }

  const getGoodsSource = async () => {
    const res = await goodsSourceApi.getGoodsSourceDetail({ id: formData.value.id })
    formData.value = res
  }

  defineExpose({ open })
</script>
<style lang="scss" scoped>
  .flex+.flex {
    border-top: 1px solid #F3F5F7;
  }

  section>div {
    padding: 20px 0;
  }

  section>div>div {
    display: flex;
  }

  .label {
    display: inline-block;
    min-width: 120px;
    text-align: right;
    color: #000000;
  }

  :deep(.el-input__wrapper) {
    width: 100%;
  }

  :deep(.el-button--primary.is-plain) {
    background-color: #ffffff !important;
  }

  :deep(.el-button:focus),
  :deep(.el-button:hover) {
    color: var(--el-color-primary) !important;
  }

  :deep(.el-form-item--default) {
    margin: 10px 0 !important
  }

  :deep(.el-form-item__label) {
    color: #000000;
  }

  :deep(.el-form-item__content) {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>